<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>普通订单</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Input
          type="text"
          v-model="params.user_id"
          clearable
          placeholder="请输入用户"
        />
      </FormItem>
      <FormItem>
        <Input
          type="text"
          v-model="params.order_id"
          clearable
          placeholder="请输入订单编号"
        />
      </FormItem>
      <FormItem>
        <Input
          type="text"
          v-model="params.activity_id"
          clearable
          placeholder="请输入活动编号"
        />
      </FormItem>
      <FormItem>
        <DatePicker
          type="daterange"
          v-model="params.device_time"
          @on-change="timechange"
          :transfer="true"
          placement="bottom-end"
          placeholder="请选择开始-结束时间"
          style="width: 200px"
        ></DatePicker>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
        >搜索</Button
        >
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status === '1'">正常</span>
          <span class="error" v-else>异常</span>
        </template>
        <template slot-scope="{ row }" slot="order_name">
          <span>{{ row.order_name[0] }}</span>
        </template>
        <template slot-scope="{ row }" slot="is_push">
          <span class="success" v-if="row.is_push == 2">完成</span>
          <span class="error" v-else>未完成</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="goDel(row.id)"
          >查看</Button
          >
        </template>
      </Table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
      />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        request: {
          device_number: "",
          page: 1,
        },
        columns1: [
          {
            title: "用户",
            key: "user_id",
            minWidth: 150,
            align: "center",
          },
          {
            title: "商品名称",
            key: "order_name",
            minWidth: 300,
            align: "center",
          },
          {
            title: "价格",
            key: "order_money",
            minWidth: 150,
            align: "center",
          },

          {
            title: "是否异常",
            slot: "status",
            minWidth: 150,
            align: "center",
          },
          {
            title: "是否完成",
            slot: "is_push",
            minWidth: 150,
            align: "center",
          },
          {
            title: "订单编号",
            key: "order_id",
            minWidth: 150,
            align: "center",
          },
          {
            title: "活动编号",
            key: "activity_id",
            minWidth: 150,
            align: "center",
          },
          {
            title: "设备编号",
            key: "device_id",
            minWidth: 150,
            align: "center",
          },

          {
            title: "创建时间",
            key: "create_time",
            minWidth: 160,
            align: "center",
          },

          {
            title: "操作",
            slot: "option",
            width: 200,
            align: "center",
            fixed: "right",
          },
        ],
        tableData: [],
        role_id:null,
      };
    },
    mounted() {

      this.init();
    },
    methods: {
      init() {
        this.axios.post("order/order_list", this.params).then((res) => {
          console.log("this.params: ", this.params);
          if (res.code == 1) {
            console.log(res);
            this.total = res.data.count;
            this.tableData = res.data.list;
          }
        });
      },
      goDel(id) {
        this.$router.push({ path: "/order/detail", query: { id } });
      },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      lists() {},
      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
    },
  };
</script>

<style>
</style>
